<template>
  <div class="current-time-config">
    <el-form :model="formStyle" label-position="top">
      <div class="classification" v-for="(classification, index) in configOptions" :key="index">
        <div class="title" v-if="classification.title">{{ classification.title }}</div>
        <div class="content">
          <el-form-item
            v-for="item in getFilteredContent(classification.content)"
            :key="item.prop || item.title"
            :prop="item.prop"
            :label="item.title"
          >
            <template v-if="item.type === 'colorPicker'">
              <div
                v-for="option in item.options"
                :key="option.prop"
                class="color-input-item"
                :style="option.condition && Object.keys(option.condition).find(key => formStyle[key] !== option.condition[key]) ? 'display: none' : ''"
              >
                <span class="color-title">{{ option.label }}</span>
                <el-color-picker size="small" v-model="formStyle[option.prop]"/>
              </div>
            </template>
            <el-select
              v-else-if="item.type === 'select'"
              size="small"
              v-model="formStyle[item.prop]"
              placeholder="请选择"
            >
              <el-option
                v-for="item in item.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-cascader
              v-else-if="item.type === 'cascader'"
              v-model="formStyle[item.prop]"
              :show-all-levels="false"
              placeholder="请选择"
              :options="item.options"
              clearable
            ></el-cascader>
            <el-input-number
              v-else-if="item.type === 'number'"
              v-model="formStyle[item.prop]"
              size="small"
              :step="item.step"
              :min="item.min"
              :max="item.max"
            ></el-input-number>
            <el-input
              v-else-if="item.type === 'input'"
              size="small"
              :maxlength="item.maxlength"
              :placeholder="item.placeholder"
              v-model="formStyle[item.prop]"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-paperclip"
                style="border-left: 1px solid #454847;"
                @click="openTianqi(item)"
              ></i>
            </el-input>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { configOptions } from "./constant";
export default {
  name: "weatherReportConfig",

  props: {
    pageDetail: {
      type: Object,
      default: () => ({})
    }
  },

  computed: {
    formStyle: {
      get() {
        return this.pageDetail;
      },
      set(val) {
        this.$emit("update:pageDetail", val);
      }
    }
  },
  data() {
    return {
      configOptions
    };
  },

  methods: {
    openTianqi(item) {
      window.open(item.jumpUrl, "_blank");
    },
    getFilteredContent(content) {
      return (content || []).filter(o => {
        if (!o.condition) return true;

        const { condition } = o;
        let visible = true;
        Object.keys(condition).forEach(key => {
          if (this.formStyle[key] !== condition[key]) {
            visible = false;
            return true;
          }
        });
        return visible;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.current-time-config {
  padding: 0 16px;
  margin-top: 10px;
  height: calc(100% - 59px);
  overflow: auto;
  padding-bottom: 10px;

  .el-form-item {
    margin-bottom: 0;
    // font-size: 12px;
    /deep/ .el-form-item__label {
      margin: 8px 0;
      line-height: 20px;
      padding: 0;
      // font-size: 12px;
    }

    /deep/.el-form-item__content {
      line-height: 24px;
    }
  }

  .el-form--label-top .el-form-item__label {
    padding: 0;
    line-height: 20px;
  }

  .el-radio {
    margin-right: 16px;
    margin-bottom: 10px;
  }

  .form-item-bold /deep/ .el-form-item__label,
  .classification .title {
    font-size: 14px;
    color: #666;
    font-weight: 600;
    margin: 8px 0;
  }

  .classification {
    padding: 8px 16px 20px;
    margin: 0 -16px;
    border-top: 1px solid #e0e0e0;
  }

  .color-input-item {
    display: inline-flex;
    flex-direction: column;
    width: 56px;
    margin-right: 25px;

    .color-title {
      display: inline-block;
      height: 28px;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  .form-item-type {
    .el-radio {
      margin-right: 4px;
    }
  }
}
</style>
